// 技能系统
import { getActiveCharacter } from './character.js';

// 初始化技能面板
function initSkillsPanel() {
    updateSkillsList();
}

// 更新技能列表显示
function updateSkillsList() {
    const skillsList = document.getElementById('skillsList');
    skillsList.innerHTML = '';
    
    // 获取当前活跃角色
    const activeCharacter = getActiveCharacter();
    // 遍历所有大类技能
    for (const [skillType, skillData] of Object.entries(activeCharacter.skills)) {
        const skillContainer = document.createElement('div');
        skillContainer.className = 'skill-category';
        
        // 创建大类技能标题
        const skillHeader = document.createElement('h4');
        skillHeader.textContent = `${skillType} (等级 ${skillData.level})`;
        skillHeader.className = 'skill-header';
        skillContainer.appendChild(skillHeader);
        
        // 创建大类技能信息
        const skillInfo = document.createElement('div');
        skillInfo.className = 'skill-info';
        skillInfo.innerHTML = `
            <p>技能点: ${Math.round(skillData.points)}</p>
            <p>悟性: ${skillData.talent}</p>
            <div class="skill-progress">
                <div class="progress-bar">
                    <div class="progress-fill" style="width: ${Math.min((skillData.points / (skillData.level * 100)) * 100, 100)}%"></div>
                </div>
                <span>${Math.round(skillData.points)} / ${skillData.level * 100}</span>
            </div>
        `;
        skillContainer.appendChild(skillInfo);
        
        // 创建小类技能列表
        const miniSkillsDiv = document.createElement('div');
        miniSkillsDiv.className = 'mini-skills';
        
        for (const [miniSkill, miniSkillPoints] of Object.entries(skillData)) {
            // 跳过非小类技能属性
            if (miniSkill === 'points' || miniSkill === 'level' || miniSkill === 'talent') {
                continue;
            }
            
            const miniSkillItem = document.createElement('div');
            miniSkillItem.className = 'mini-skill-item';
            miniSkillItem.innerHTML = `
                <span class="mini-skill-name">${miniSkill}:</span>
                <span class="mini-skill-points">${Math.round(miniSkillPoints)}</span>
            `;
            miniSkillsDiv.appendChild(miniSkillItem);
        }
        
        skillContainer.appendChild(miniSkillsDiv);
        skillsList.appendChild(skillContainer);
    }
    
    // 添加CSS样式
    addSkillsStyles();
}

// 添加技能面板样式
function addSkillsStyles() {
    const style = document.createElement('style');
    style.textContent = `
        .skill-category {
            background-color: #fff;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .skill-header {
            color: #8b4513;
            margin-bottom: 10px;
            font-size: 18px;
            border-bottom: 1px solid #cd853f;
            padding-bottom: 5px;
        }
        
        .skill-info {
            margin-bottom: 15px;
        }
        
        .skill-info p {
            margin: 5px 0;
            color: #666;
        }
        
        .skill-progress {
            margin-top: 10px;
        }
        
        .progress-bar {
            width: 100%;
            height: 15px;
            background-color: #f0e6d2;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 5px;
        }
        
        .progress-fill {
            height: 100%;
            background-color: #8b4513;
            transition: width 0.3s ease;
        }
        
        .skill-progress span {
            font-size: 14px;
            color: #8b4513;
        }
        
        .mini-skills {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 10px;
            margin-top: 10px;
        }
        
        .mini-skill-item {
            display: flex;
            justify-content: space-between;
            padding: 8px;
            background-color: #f8f4e9;
            border-radius: 4px;
        }
        
        .mini-skill-name {
            font-weight: bold;
            color: #666;
        }
        
        .mini-skill-points {
            color: #8b4513;
            font-weight: bold;
        }
    `;
    document.head.appendChild(style);
}

// 导出函数供其他模块使用
export {
    initSkillsPanel,
    updateSkillsList
};